<template>
  <div>
    <swiper :options="swiperOption" ref="banerSwiper">
      <!-- slides -->
      <swiper-slide v-for="item in banners" :key="item.id">
        <img :src="item.imgSrc" alt="">
      </swiper-slide>
      <div class="swiper-pagination banner-pag" slot="pagination"></div>
    </swiper>
    <div class="mui-segmented-control mh-segmented sub-control">
      <a class="mui-control-item mui-active" href="javascript:" @tap="handleExplore(1)"><span>搜索</span></a>
      <a class="mui-control-item" href="javascript:"  @tap="handleExplore(2)"><span>动态</span></a>
      <a class="mui-control-item" href="javascript:"  @tap="handleExplore(3)"><span>发现</span></a>
      <a class="mui-control-item" href="javascript:"  @tap="handleExplore(4)"><span>商城</span></a>
    </div>
    <search-con ref="searchCon" @showLayer="showLayerEvt"> </search-con>
    <search-user ref="getlist"> </search-user>
    <div class="filter-backdrop" v-show="showLayer" @tap="closeLayer"></div>
    <tab-menu :activeTab="activeFootTab"> </tab-menu>
  </div>
</template>

<script>
  import TabMenu from '@/components/tab-menu/tab-menu'
  import SearchCon from '@/components/explore/search-condition'
  import SearchUser from '@/components/explore/user-list'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper';
  export default {
    name: "explore-search",
    data () {
      return {
        activeFootTab: 3,
        showLayer: false,
        showBack: false,
        swiperOption: {
          loop: true,
          centeredSlides: true,
          pagination: {
            el: '.swiper-pagination'
          }
        },
        banners: [
          {
            id: '1',
            imgSrc: 'https://yanxuan.nosdn.127.net/4e4806eb489e3dc09c46fcb847696e1c.jpg?imageView&quality=95&thumbnail=1090x310'
          },
          {
            id: '2',
            imgSrc: 'https://yanxuan.nosdn.127.net/56f76169f37f0911ead70e7690e5ad0b.jpg?imageView&quality=95&thumbnail=1090x310'
          }
        ]
      }
    },
    computed: {
      swiper() {
        return this.$refs.banerSwiper.swiper
      }
    },
    mounted () {
      this.swiper.slideTo(1, 1000, false)
    },
    methods: {
      showLayerEvt (evt) {
        if (evt) {
          this.showLayer = true;
        }else {
          this.showLayer = false;
        }
      },
      closeLayer () {
        this.showLayer = false;
        this.$refs.searchCon.$emit('closeFilter')
      },
      getList(order, address, height, marriage, income, car, house, registered_residence, hometown, children, zodiac){
        this.$refs.getlist.getData(order, address, height, marriage, income, car, house, registered_residence, hometown, children, zodiac);
        this.closeLayer();
      },
      handleExplore (i) {
        switch (i) {
          case 1 :
            this.$router.replace({
              path: '/explore/search'
            });
            break;
          case 2:
            this.$router.replace({
              path: '/explore/dynamic'
            });
            break;
          case 3:
            this.$router.replace({
              path: '/explore/find'
            });
            break;
          case 4:
            this.$router.replace({
              path: '/explore/mall'
            });
            break;
          default:
            this.$router.replace({
              path: '/explore/search'
            });
        }
      }
    },
    components: {
      TabMenu,
      SearchCon,
      SearchUser,
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="scss" scoped>
  .swiper-container {
    width: 100%;
    height: 100%;
    z-index: 9;
    .swiper-pagination-bullet-active {background: #de73a4;}
  }
  .sub-control {z-index: 9;}
  .swiper-slide {
    text-align: center;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .filter-backdrop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 5rem;
    background-color: rgba(0,0,0,.3);
    z-index: 8;
  }
</style>
